<!DOCTYPE html>
<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/taglibs.jsp" %>
<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="${css}/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${css}/map/ol.css" type="text/css">
    <link rel="stylesheet" href="${css}/map/ol3-layerswitcher.css" type="text/css">
    <link rel="stylesheet" href="${css}/map/ol3-contextmenu.min.css" type="text/css">
    <link rel="stylesheet" href="${css}/map/map.css" type="text/css">
    <title>轨迹管理</title>
</head>
<body>

<div id="map" class="map"></div>
<div class="span6" id="mouse-position"></div>

<!-- 操作工具栏 -->
<div id="tools" class="tools" style="width: 100%">
    <span class="btn-group">
    <button class="J_type btn btn-default disabled" value="Point"> <img src="${img}/map/Point.png">点 </button>
    <button class="J_type btn btn-default disabled" value="MultiLineString">
        <img src="${img}/map/LineString.png">线
    </button>
    <button class="J_type btn btn-default disabled" value="Polygon"><img src="${img}/map/Polygon.png">面</button>
    </span>
    <span class="btn-group">
    <button id="delete" class="btn btn-default disabled"><img src="${img}/map/delete.png">删除</button>
    </span>
    <span class="btn-group">
    <button class="J_undo btn btn-default disabled" value="1"><img src="${img}/map/undo.png"></button>
    <%--<button class="J_redo btn btn-default disabled" value="2"><img src="${img}/map/redo.png"></button>--%>
    </span>
    <!-- 导入 -->
    <span class="btn-group">
        <label for="file" style="margin-bottom: 0" class="btn btn-default tooltip-show" data-toggle="tooltip"
               data-placement="bottom" title="支持GPX,KML.geoJson等格式文件">
            <img src="${img}/map/import.png">导入
        <input type="file" id="file" style="display: none">
        </label>
    </span>

    <span class="btn-group">
    <button id="save" class="save btn btn-default disabled"><img src="${img}/map/save.png">保存</button>
    <button id="save-publish" class="save btn btn-default disabled"><img src="${img}/map/save.png">保存并发布</button>
    </span>

    <span class="btn-group" style="position:absolute;right:8px;">
        <button id="getUserPath" data_type="1" class="J_path btn btn-default"><img
                src="${img}/map/user_path.png">用户轨迹</button>
        <button id="getSysPath" data_type="2" class="J_path btn btn-default"><img
                src="${img}/map/sys_path.png">系统轨迹</button>
        <button id="getMySysPath" data_type="3" class="J_path btn btn-default"><img src="${img}/map/sys_path.png">待发布轨迹</button>
    </span>
</div>


<!-- 属性编辑面板 -->
<div id="edit_panel">
    <i></i>
    <div id="properties"></div>
</div>
<!-- 右下角显示的要素名称 -->
<div id="info" class="alert alert-info" role="alert">&nbsp;</div>
<div id="path-list">
    <i></i>
    <div class="search">
        <form id="search_user_path_form">
            <div class="title">搜索</div>
            <div class="form-group">
                <label>日期:</label>
                <span>
                    <input type="date" class="" name="startTime" style=" width: 35%; ">至
                    <input type="date" class="" name="endTime" style=" width: 35%; ">
                </span>
            </div>
            <div class="form-group">
                <label>手机号:</label>
                <input type="text" class="form-control" name="mobile">
            </div>
            <div class="form-group">
                <label>地区:</label>
                <span id='province'>
                    <select name="province">
                        <option value="">省份</option>
                    </select>
                </span>
                <span id='city'>
                    <select name="city">
                        <option value="">城市</option>
                    </select>
                </span>
            </div>
            <div class="form-group">
                <label>设备类型:</label>
                <select name="system_type" class="form-control">
                    <option value="">请选择...</option>
                    <option value="1">Android</option>
                    <option value="2">IOS</option>
                </select>
            </div>
            <div class="form-group">
                <label>设备型号:</label>
                <input type="text" class="form-control" name="phone_model">
            </div>
            <button class="btn btn-primary" id="search_user_path" type="button">搜索</button>
        </form>
    </div>
    <h3 class="list_title" path_type="1" style="display: none">用户轨迹列表</h3>
    <h3 class="list_title" path_type="2" style="display: none">系统轨迹列表</h3>
    <h3 class="list_title" path_type="3" style="display: none">待发布轨迹列表</h3>
    <div class="content"></div>
</div>
<script>
    window.userId = '${userId}';
</script>
<script src="${js}/bootstrap.min.js" type="text/javascript"></script>
<script src="${js}/doT.min.js" type="text/javascript"></script>
<script src="${js}/province.js"></script>
<script src="${js}/map/lib/pubsub.js" type="text/javascript"></script>
<script src="${js}/map/lib/ol.js" type="text/javascript"></script>
<script src="${js}/map/lib/ol3-layerswitcher.js" type="text/javascript"></script>
<script src="${js}/map/lib/ol3-contextmenu.js" type="text/javascript"></script>
<script src="${js}/map/lib/localStrong.js" type="text/javascript"></script>
<script src="${js}/map/style.js" type="text/javascript"></script>
<script src="${js}/map/PositionUtil.js" type="text/javascript"></script>
<!-- 加载图层 -->
<script src="${js}/map/baseMap.js"></script>
<script src="${js}/map/controls.js"></script>
<script src="${js}/map/contextmenu.js"></script>
<!-- 在地图上划线 -->
<script src="${js}/map/draw.js"></script>
<script src="${js}/map/dragAndDrop.js"></script>
<script src="${js}/map/saveData.js"></script>
<script src="${js}/map/keyEvent.js"></script>
<script src="${js}/map/domEvent.js"></script>
<!-- ------------------------------------------------------模板start---------------------------------------------------- -->
<!-- 线 -->
<script type="text/x-dot-template" id="MultiLineString">
    <h5 class="">轨迹属性</h5>
    <form>
        <div class="form-group">
            <label for="MultiLineString_name">名称</label>
            <input type="text" class="form-control" id="MultiLineString_name" name="name" value="{{=it.name||''}}">
        </div>
        <div class="form-group dropdown">
            <label>类型</label>
            <select class="form-control" name="type">
                <option>请选择</option>
                <option value="1" {{? it.type==1}}selected{{?}}>官方轨迹</option>
                <option value="2" {{? it.type==2}}selected{{?}}>热门轨迹</option>
                <option value="3" {{? it.type==3}}selected{{?}}>推荐轨迹</option>
            </select>
        </div>
        <div class="form-group">
            <label for="MultiLineString_start">开始位置</label>
            <input type="text" class="form-control" id="MultiLineString_start" name="start" value="{{=it.start||''}}">
        </div>
        <div class="form-group">
            <label for="MultiLineString_end">结束位置</label>
            <input type="text" class="form-control" id="MultiLineString_end" name="end" value="{{=it.end||''}}">
        </div>
        <div class="form-group">
            <label for="MultiLineString_kilometre">轨迹长度(km）</label>
            <input type="text" class="form-control" id="MultiLineString_kilometre" name="kilometre"
                   value="{{=it.kilometre||''}}" readonly>
        </div>
        <div class="form-group">
            <label for="MultiLineString_altitude">最高海拔(m）</label>
            <input type="text" class="form-control" id="MultiLineString_altitude" name="altitude"
                   value="{{=it.altitude||''}}">
        </div>
        <div class="form-group">
            <label for="MultiLineString_height">累计爬升高度(m）</label>
            <input type="text" class="form-control" id="MultiLineString_height" name="height"
                   value="{{=it.height||''}}">
        </div>
        <div class="form-group">
            <label for="MultiLineString_time">时长(min)</label>
            <input type="text" class="form-control" id="MultiLineString_time" name="time" value="{{=it.time||''}}">
        </div>
        <div class="form-group">
            <label for="MultiLineString_speed">平均速度(m/s）</label>
            <input type="text" class="form-control" id="MultiLineString_speed" name="speed" value="{{=it.speed||''}}">
        </div>
        <hr>
        <h5>文字属性</h5>
        <div class="form-group">
            <label for="Point_comment">大小</label>
            <input type="number" class="" id="MultiLineString_fontSize" name="fontSize" value="{{=it.fontSize||'10'}}"
                   min="5" max="30" step="1">px
        </div>
        <div class="form-group">
            <label for="Point_comment">颜色</label>
            <input type="color" class="" id="MultiLineString_fontColor" name="fontColor" value="{{=it.fontColor||''}}">
        </div>
        <hr>
        <h5>线属性</h5>
        <div class="form-group">
            <label for="Point_comment">线宽</label>
            <input type="number" class="" id="MultiLineString_lineWidth" name="lineWidth" value="{{=it.lineWidth||'3'}}"
                   min="1" max="20" step="1">px
        </div>
        <div class="form-group">
            <label for="Point_comment">线型</label>
            <select class="form-control" name="lineType">
                <option>请选择</option>
                <option value="1" {{? it.lineType==1}}selected{{?}}>实线</option>
                <option value="2" {{? it.lineType==2}}selected{{?}}>虚线</option>
            </select>
        </div>
        <div class="form-group">
            <label for="Point_comment">线颜色</label>
            <input type="color" class="" id="MultiLineString_lineColor" name="lineColor"
                   value="{{=it.lineColor||'#00ff00'}}">
        </div>
    </form>
</script>

<!-- 点 -->
<script type="text/x-dot-template" id="Point">
    <h5 class="">编辑要素属性</h5>
    <form>
        <div class="form-group">
            <label for="Point_name">名称</label>
            <input type="text" class="form-control" id="Point_name" name="name" value="{{=it.name||''}}">
        </div>
        <div class="form-group dropdown">
            <label>类型</label>
            <select class="form-control" name="type">
                <option>请选择</option>
                <option value="1" {{? it.type==1}}selected{{?}}>警告点</option>
                <option value="2" {{? it.type==2}}selected{{?}}>安全点</option>
                <option value="3" {{? it.type==3}}selected{{?}}>兴趣点</option>
                <option value="4" {{? it.type==4}}selected{{?}}>休息点</option>
            </select>
        </div>
        <div class="form-group">
            <label for="Point_description">描述</label>
            <input type="text" class="form-control" id="Point_description" name="description"
                   value="{{=it.description||''}}">
        </div>
        <div class="form-group">
            <label for="Point_elevation">海拔(m）</label>
            <input type="text" class="form-control" id="Point_elevation" name="elevation" value="{{=it.elevation||''}}">
        </div>
        <div class="form-group">
            <label for="Point_comment">备注</label>
            <input type="text" class="form-control" id="Point_comment" name="comment" value="{{=it.comment||''}}">
        </div>
        <hr>
        <hr>
        <div class="form-group">
            <label for="Point_comment">字体大小</label>
            <input type="number" class="" id="Point_fontSize" name="fontSize" value="{{=it.fontSize||'10'}}" min="5"
                   max="30" step="1">px
        </div>
        <div class="form-group">
            <label for="Point_comment">文字颜色</label>
            <input type="color" class="" id="Point_fontColor" name="fontColor" value="{{=it.fontColor||''}}">
        </div>
    </form>
</script>

<!-- 面 -->
<script type="text/x-dot-template" id="Polygon">
    <h5 class="">编辑要素属性</h5>
    <form>
        <div class="form-group">
            <label for="Polygon_name">名称</label>
            <input type="text" class="form-control" id="Polygon_name" name="name" value="{{=it.name||''}}">
        </div>
        <div class="form-group">
            <label for="Polygon_name">描述</label>
            <input type="text" class="form-control" id="Polygon_description" name="description"
                   value="{{=it.description||''}}">
        </div>
    </form>
</script>

<script type="text/x-dot-template" id="path">
    <div class="list-group" path_type="{{=it.type}}" total="{{=it.total||0}}">
        {{~it.list:value:index}}
        <a href="#" class="list-group-item container-fluid" id="{{=value.id}}" gpx='{{=value.gpx||""}}'
           geojson='{{=value.geojson}}'>
            <div class="row">
                <span class="path-name col-xs-7">{{=value.name||''}}</span>
                <span class="path-kilometre col-xs-5">{{=value.kilometre||0}}公里</span>
            </div>
            <div class="row">
                <span class="path-se col-xs-7">
                    {{?!!value.start&&!!value.end}}
                        {{=value.start}}--{{=value.end}}
                    {{?}}
                </span>
                <span class="path-time col-xs-5">耗时:{{=value.time||0}}</span>
            </div>
            <i class="delete_btn"></i>
        </a>
        {{~}}
    </div>
</script>
<!-- ------------------------------------------------------模板start---------------------------------------------------- -->
</body>
</html>
